<template>
	<div class="flex-wrap-column">
		<CustomTabs :tabList="tabList" v-model:tabActive="tabActive">
			<template #right>
				<CustomBtn @click="$router.push('/createUser/link')"
					>+添加联系人</CustomBtn
				>
			</template>
		</CustomTabs>
		<CustomGmSearch
			ref="customGmSearch"
			:col="columns"
			v-model:tableData="tableData"
			:formList="formList"
			:controlList="controlList"
			:apiConfig="apiConfig"
			v-model:formData="formData"
			@control-handel="controlHandle"
		>
		</CustomGmSearch>
		<!-- 弹出层 -->
		<CustomDelDialog
			v-model:visible="delShow"
			:apiConfig="deleteCustomerList"
			:apiPostData="{
				customerId: currentData?.id,
			}"
			@updateList="
				() => {
					customGmSearch.init()
				}
			"
		/>
	</div>
	<Dialog :id="currentId" v-model:visible="dialogVisible" />
</template>

<script setup lang="ts">
import CustomTabs from '@/components/customTabs/index.vue'
import CustomGmSearch from '@/components/customGmSearch/index.vue'
import CustomBtn from '@/components/customBtn/index.vue'
import CustomDelDialog from '@/components/customDelDialog/index.vue'
import Dialog from './components/dialog.vue'
import {
	getCustomerList,
	deleteCustomerList,
	getContactsList,
} from '@/api/customer'
import { userStorage } from '@/utils/storage'
import { useRouter } from 'vue-router'
const { id: managerId } = userStorage.get()
const customGmSearch = ref(null)
interface formItem {
	type: string
	props: string
	set?: {
		placeholder: string
	}
	options?: Array<{
		label: string
		value: number | string
	}>
}
const $router = useRouter()
const tabList = [
	{
		label: '客户',
		id: 1,
	},
	{
		label: '联系人',
		id: 2,
	},
]
const tabActive = ref(1)
watch(
	() => tabActive.value,
	(val) => {
		const a = document.querySelector('.is-active span')
		if (!a) return
		if (val === 2) {
			nextTick(() => {
				a.innerHTML = '客户联系人'
			})
		}
		{
			a.innerHTML = '客户管理'
		}
	},
	{
		deep: true,
		immediate: true,
	}
)
const apiConfig = computed(() => {
	return tabActive.value === 1 ? getCustomerList : getContactsList
})
const formData = reactive({
	keyword: '',
	creatorId: null,
	managerId: null,
	customerKeyword: '',
	status: 'ACTIVE',
})
const tableData = ref([])
const formList = computed<formItem[]>(() => {
	return [
		{
			type: 'select',
			props: 'managerId',
			set: {
				placeholder: '全部',
			},
			options: [
				{ value: '', label: '全部' },
				{ value: managerId, label: '我管理的' },
				{ value: '', label: '我参与的' },
			],
		},
		{
			type: 'searchInput',
			props: tabActive.value === 1 ? 'keyword' : 'customerKeyword',
			set: {
				placeholder: '搜索客户名称',
			},
		},
	]
})

const controlList = [
	{
		icon: 'menu',
	},
	{
		icon: 'deliver',
	},
	{
		icon: 'transform',
	},
]
const currentId = ref(null)
const dialogVisible = ref(false)
const columns = computed(() => {
	return tabActive.value === 1
		? [
				{
					prop: 'partyName',
					label: '客户名称',
					width: 230,
					type: 'link',
					set: {
						clickCallBack({ partyName, id }) {
							const titleEncode = encodeURIComponent(partyName)
							const recordList = tableData.value.map((item) => {
								return {
									partyName: item.partyName,
									id: item.id,
								}
							})
							$router.push({
								path: '/detail/overview',
								query: {
									title: titleEncode,
									id: id,
									recordList: encodeURIComponent(JSON.stringify(recordList)),
								},
							})
						},
					},
				},
				{ prop: 'customerId', label: '客户编号', width: 180 },
				{ prop: 'customerSpecificType', label: '客户类型', width: 150 },
				{ prop: 'customerLevel', label: '客户级别', width: 150 },
				{ prop: 'customerSource', label: '来源', width: 120 },
				{ prop: 'address', label: '省/市', width: 200 },
				{ prop: 'managerName', label: '管理者', width: 200 },
				{ prop: 'updatedAt', label: '更新时间', width: 200 },
				{
					prop: 'control',
					label: '操作',
					type: 'control',
					width: 80,
					fixed: 'right',
					set: {
						orderList: [
							{
								title: '转发',
								icon: 'share',
							},
							{
								title: '导出和打印',
								icon: 'export',
							},
							{
								title: '锁定',
								icon: 'lock',
							},
							{
								title: '设为日程',
								icon: 'plan',
							},
							{
								title: '关注内容更新',
								icon: '',
							},
							{
								title: '更换管理者',
								icon: 'change',
							},
							{
								title: '删除',
								icon: 'delete',
							},
						],
					},
				},
		  ]
		: [
				{
					prop: 'customerName',
					label: '客户名称',
					width: 230,
					type: 'link',
					set: {
						clickCallBack({ customerName, customerId }) {
							const titleEncode = encodeURIComponent(customerName)
							const recordList = tableData.value.map((item) => {
								return {
									partyName: item.customerName,
									id: item.customerId,
								}
							})
							$router.push({
								path: '/detail/overview',
								query: {
									title: titleEncode,
									id: customerId,
									recordList: encodeURIComponent(JSON.stringify(recordList)),
								},
							})
						},
						// clickCallBack({ customerName, id }) {
						// 	const titleEncode = encodeURIComponent(customerName)
						// 	$router.push({
						// 		path: '/detail/overview',
						// 		query: {
						// 			title: titleEncode,
						// 			id: id,
						// 		},
						// 	})
						// },
					},
				},
				{
					prop: 'contactName',
					label: '联系人姓名',
					type: 'link',
					width: 230,
					set: {
						clickCallBack(row) {
							currentId.value = row.id
							dialogVisible.value = true
						},
					},
				},
				{
					prop: 'department',
					label: '部门',
					width: 230,
					filterOption(value) {
						return JSON.parse(localStorage.getItem('departmentList')).find(
							(item) => item.value == value
						)?.label
					},
				},
				{ prop: 'position', label: '职务', width: 230 },
				{ prop: 'gender', label: '性别', width: 230 },
				{ prop: 'address', label: '省/市', width: 230 },
				{ prop: 'managerName', label: '管理者', width: 230 },
				{ prop: 'updatedAt', label: '更新时间', width: 200 },
				{
					prop: 'control',
					label: '操作',
					type: 'control',
					width: 80,
					fixed: 'right',
					set: {
						orderList: [
							// {
							// 	title: '转发',
							// 	icon: 'share',
							// },
							{
								title: '编辑',
								icon: 'edit',
							},
							{
								title: '删除',
								icon: 'delete',
							},
						],
					},
				},
		  ]
})
// 操作表格
const delShow = ref(false) //显示删除弹窗
const currentData = ref(null)
const controlHandle = (e: string, row: any) => {
	switch (e) {
		case '删除':
			delShow.value = true
			currentData.value = row
			break
		case '编辑':
			$router.push({
				path: '/createUser/link',
				query: {
					preview: row.id,
				},
			})
			break
	}
	// console.log(e, row)
	// visible.value = true
}
</script>

<style scoped lang="less"></style>
